<template>
  <div>
    <!-- <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <div>{{ msg }}</div>
    <div>{{ reverseMsg }}</div>
    <h2>{{ counter }}</h2>
    <button @click="changeCounter()">改变counter</button>
    <h2>{{ obj }}</h2>
    <button @click="changeAge()">改变obj的年龄</button>
    <h2>{{ child.childName }}</h2>
    <button @click="changeCname()">改变child的名字</button>
    <h2>{{ reMsg }}</h2>
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <hr />
    <el-dropdown>
      <span class="el-dropdown-link">
        Dropdown List
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item disabled>Action 4</el-dropdown-item>
          <el-dropdown-item divided>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { ref, reactive, toRefs, watch, watchEffect, computed } from 'vue'

export default {
  name: 'Home',
  // components: {
  //   HelloWorld
  // },
  data() {
    return {
      msg: 'ABC'
    }
  },
  computed: {
    reverseMsg: function () {
      return this.msg.split('').reverse().join('')
    }
  },
  setup() {
    // 定义响应式变量
    const counter = ref(0)
    function changeCounter() {
      counter.value++
    }

    // 定义引用类型数据
    const obj = reactive({
      name: '张三',
      age: 18,
      child: {
        childName: '李四',
        childAge: '2'
      }
    })
    function changeAge() {
      obj.age = 27
    }
    function changeCname() {
      obj.child.childName = '王五'
    }
    // 侦听属性
    watch(counter, (newVal, oldVal) => {
      console.log('counter的值改变了')
      console.log('NewValue', newVal)
      console.log('OldValue', oldVal)
    })
    // 侦听对象中的值 watchEffect 不需要指定监听的属性，组件初始化的时候会执行一次自动 收集依赖
    watchEffect(() => {})

    const msg = ref('hello')
    const reMsg = computed(() => {
      return msg.value.split('').reverse().join('')
    })

    return { counter, changeCounter, obj, changeAge, ...toRefs(obj), changeCname, reMsg }
  }
}
</script>
